#CSS Tutorial

[thecodecoven]

Hace unos días, cuando estaba compilando las fuentes para el pack que les subimos, me llegó una duda. Verán, algunas fuentes tienen versiones alternativas o caracteres alternativos. En Photoshop es fácil elegir la opción para usar esas variantes, pero me surgió la duda de cómo se lograría en CSS.

Bueno, al parecer la opción sí existe y se llama font-feature-settings. ¿Es infalible? Nope. ¿Podré usar todos los caracteres que tenga la fuente? No lo sé al cien por ciento. De todas maneras, quise hacerles este post para compartirles mi nuevo descubrimiento.

Tomemos de ejemplo la primera fuente de este pack, Balgon. Lo primero que vemos es el nombre de la fuente con caracteres que no están en los glifos principales, ¿cierto?

Pero si clickamos en "Ver todos los glifos", podremos darnos cuenta que sí están incluidos en la fuente, sólo que bajo un nombre diferente. En el caso de la fuente Balgon, tienen el nombre uniE000, de acuerdo al caracter. A veces, en otras fuentes, estos caracteres alternativos se llaman alt, aalt, salt, etcétera.*

Entonces, si queremos usar estas versiones, basta con agregar lo siguiente:

.tu-clase { font-feature-settings: "salt" 1; -webkit-font-feature-settings: "salt" 1; }

*Si no funciona con "salt", intenta alguno de los otros nombres como alt, aalt, etcétera.

¡Y voilà! Puedes ver el resultado dando click acá. ✨

¡Pero espera, hay más! Si hay más de un estilo alternativo, puedes sustituir el 1 por 2, o 3. Inténtalo y nos cuentas.

[divinector]

Responsive Web Layout with Video Background

[codingflicks]

Card Flip Animation

[worrynoodle]

tutorials for css you say...😈

https://www.w3schools.com/css/default.asp - this site is excellent for learning how to code shit (I rely on it so heavily for neocities lmfao)

ao3commentoftheday posts their own site skins and also has helped people with specific css functions in the past

finally you can just look up site skin on ao3, people post site skins that change how everything looks to site skins that just hide specific functions AND people post css for workskins too! (La_temperanza's rounded playlist work comes to mind), so you can always pick these apart for specific bits of code

Thanks so much im gonna check those out!

I didnt know that ao3 skins were a thing until today and im having an absolute blast with it

[thecommoncoder]

🚨 NEW VIDEO ALERT! 🚨

In this video, we’re breaking down the essentials of CSS—syntax, ways to add it to your HTML, key types of selectors, and even some advanced concepts like combinators, pseudo-classes, pseudo-elements and specificity. Enjoy! 🎉

#css #webdevelopment #csstutorial #learncss #thecommoncoder

https://youtu.be/qoNSnSErLJQ?si=eLcSF5AFPZL6mYGl

[codenewbies]

Responsive Website Layout

[frontendforever]

Responsive Animated Website With HTML & CSS

[freefrontend-blog]

CSS Landscape | 2024 #2 Welcome to CSS Landscape digest, where we curate the latest articles, tutorials, and videos to keep you informed and inspired in the world of CSS. In this edition, discover techniques for breaking words effectively, explore innovative CSS button styles, and learn how to handle dark mode with CSS and JavaScript. Dive into advanced tooltip design, captivating border animations, and much more. Stay ahead in CSS trends and techniques with CSS Landscape digest. https://freefrontend.com/css-landscape-2024-03-29/

[tpointtech1]

CSS Tutorial for Beginners: No Code Needed!

This infographic provides a visual CSS tutorial for beginners, breaking down core concepts such as selectors, properties, values, and the box model. Learn how to style text, layout elements, and manage spacing with margin and padding. Perfect for those new to web design, it simplifies styling basics into easy steps to help you build beautiful, responsive web pages with CSS.

CONTACT INFORMATION

Email:  hr@tpointtech.com

Phone No. :  +91-9599086977

Website:  https://www.tpointtech.com/css-tutorial

Location:  G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[tpointtechblogs]

Become a CSS Wizard: Style Like a Pro!

Ready to take your web design skills to the next level?  In this CSS tutorial, you’ll learn everything you need to become a CSS wizard — from styling basics to advanced techniques like Flexbox, Grid, animations, and more. Whether you’re a beginner or looking to sharpen your skills, this guide is packed with tips, tricks, and real-world examples. Style like a pro and transform your websites into stunning masterpieces. Let’s dive into the magic of CSS!

[thecodecoven]

We have noticed we have followers who would also benefit from having these posts in English (or maybe even Portuguese or French, which may come in the future) so we decided to start posting in both languages from now on. Without further ado, let's get into the tutorial.

As I was saying in the Spanish version, this question popped up in my head while searching for fonts. I noticed many of them had alternative characters that were not easily accesible outside of desktop or Photoshop use. But what if I want to use those characters in CSS?

Well, the option actually exists and it's called font-feature-settings. But some things first: Will it always work? Nope. Will I be able to use all the alt types or letters? I'm not 100% sure. Regardless of that, I still wanted to make this post/tutorial to share my findings.

So, let's take the first font in this pack, Balgon. The first thing we notice is that the font name is written with different types, right?

Now, if we click on "View all glyphs", we will see that those glyphs are indeed in the font under a different name. In the case of Balgon, for example, they are uniE000, with every number changing according to each glyph. Sometimes, other fonts use alt, aalt, salt, etcetera.*

So, if we want to use these versions, we need to add the following code:

.your-class { font-feature-settings: "salt" 1; -webkit-font-feature-settings: "salt" 1; }

*If "salt" doesn't work, try using some of the other spellings like alt, aalt, etc.

Voilà! You can see the results here (text in Spanish). ✨

But wait, there's more! If the font has more than one alt type, you can change the number 1 to 2, or 3. Try it and let us know if it worked for you.

[divinector]

CSS Card Flip

[codingflicks]

Responsive Web Layout Design

[tutorialwithexample]

Start Coding with CSS: A Beginner-Friendly Tutorial to Beautiful Web Design

If you are starting your journey in web development, understanding CSS (Cascading Style Sheets) is essential. In this CSS Tutorial for Beginners, we’ll explore how CSS helps you make your web pages look attractive and organized.

CSS works hand-in-hand with HTML. While HTML is used for creating the structure of a webpage, CSS is used for styling. With CSS, you can change the colors, fonts, spacing, and layout of your content. For example, you can make your headings bold, change the background color of your page, or center-align text.

There are three ways to add CSS to your website: inline, internal, and external. Inline CSS allows you to add styles directly to individual elements. Internal CSS involves adding styles within your HTML document but in a dedicated section. External CSS uses a separate file linked to your HTML, making it easier to manage styles across multiple pages.

Learning CSS helps you control the design of your site, from basic formatting to advanced layouts. As you grow more confident, you can explore features like Flexbox for arranging elements or Grid for complex designs. You can even add animations and transitions to make your website more interactive.

With consistent practice, you’ll be able to transform plain web pages into visually amazing sites. For a detailed step-by-step guide, visit CSS Tutorial for Beginners. Happy learning!

[jtpoint]

This CSS Tutorial for Beginners provides a simple introduction to styling web pages. Learn essential CSS concepts like colors, fonts, and layout techniques to create attractive and well-designed websites easily.